<!DOCTYPE HTML>
<html lang="en">
<head>

<!-- charset -->
<meta charset="UTF-8">

<!-- Title, description and keywords -->
<title>Xero | Premium XHTML &amp; CSS Template By TahaH Studio</title>
<meta name="description" content="A premium (X)HTML &amp; CSS template designed and developed by TahaH Studio">
<meta name="keywords" content="xero, XHTM, CSS, Template, Professional, Mulicolour, TahaH, Themeforest">

<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" type="text/css" id="skin" href="css/skins/sky-blue.css" media="screen">
<!--
<link rel="stylesheet" type="text/css" href="css/skins/blue.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/red.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/purple.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/green.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/orange.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/yellow.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/skins/cream.css" media="screen">
-->

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all">
<![endif]-->

<!-- Javascripts -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.superfish.min.js"></script>
<script type="text/javascript" src="js/jquery.tools.min.js"></script>
<script type="text/javascript" src="js/xero.js"></script>
<script type="text/javascript" src="js/xero.forms.js"></script>

</head>
<body>
<div id="wrapper">
	<div id="header_container">
		<div id="header">
			<h1 id="logo"> <a href="index.html">Xero HTML &amp; CSS Template</a> </h1>
			<!-- end logo -->
			
			<ul id="nav">
				<li><a href="index.html"><span>Home</span></a></li>
				<li><a href="#" class="current"><span>Pages</span></a>
					<ul class="subnav">
						<li><a href="html-elements.html">HTML Elements Test</a></li>
						<li><a href="full-width.html">Full Width</a></li>
						<li><a href="#">Pages Options</a>
							<ul class="subnav">
								<li><a href="sidebar-left.html">Sidebar Left</a></li>
								<li><a href="sidebar-right.html">Sidebar Right</a></li>
							</ul>
						</li>
						<li><a href="#">Dropdown</a>
							<ul class="subnav">
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a></li>
								<li><a href="#">DropDown</a>
									<ul class="subnav">
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
										<li><a href="#">DropDown</a></li>
									</ul>
									<!-- end 3rd sub navigation --> 
								</li>
							</ul>
							<!-- end 2nd sub navigation --> 
						</li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="#"><span>Blog</span></a>
					<ul class="subnav">
						<li><a href="blog.html">Blog Page</a></li>
						<li><a href="single-post.html">Single Post</a></li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="#"><span>Portfolio</span></a>
					<ul class="subnav">
						<li><a href="portfolio-1.html">Portfolio Style 1</a></li>
						<li><a href="portfolio-2.html">Portfolio Style 2</a></li>
						<li><a href="portfolio-3.html">Portfolio Style 3</a></li>
					</ul>
					<!-- end sub navigation --> 
				</li>
				<li><a href="contact.php"><span>Contact</span></a></li>
			</ul>
			<!-- end main navigation -->
			
			<div class="clear"></div>
			<!-- clears floted logo & nav -->
			
			<div id="page_title">
				<ul class="breadcrumb_nav">
					<li><a href="#">Home</a></li>
					<li><a href="#">Pages</a></li>
				</ul>
				<h1>HTML Style</h1>
			</div>
			<!-- end page title -->
			
		</div>
		<!-- end header (940px width) --> 
	</div>
	<!-- end header container (100% width) -->
	
	<div id="body_content">
		<div id="content" class="has_sidebar left">
			<h2>Text with images <em class="heading_description">P tags with images, one is aligned right &amp; the is aligned left</em></h2>
			<img src="images/sample_image.jpg" class="alignleft noTopMargin" alt="A Sample Image"> 
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sollicitudin tempor pulvinar. Etiam in ante sed leo tincidunt eleifend. Phasellus justo mauris, imperdiet ut dignissim sit amet, bibendum et augue. Maecenas sem nibh, malesuada ut posuere id, porta quis neque. Aenean quis elementum quam. Maecenas malesuada, massa a lacinia ullamcorper, ante risus sollicitudin turpis, a aliquam nisl felis vitae odio.
			</p>
			<span class="clear"></span>

			<img src="images/sample_image.jpg" class="alignright noTopMargin" alt="A Sample Image">
			<p>
			Mauris congue adipiscing lobortis. Praesent id turpis orci, ut mattis arcu. Sed dui metus, commodo nec eleifend non, aliquam vel odio. Suspendisse a risus mi. Fusce ut neque quis sapien eleifend feugiat in sed lacus. Suspendisse bibendum, leo ultricies vestibulum tempor, erat dolor molestie orci, vitae dignissim ante justo eleifend justo. Mauris consectetur, sem eu pellentesque fringilla, nulla justo ornare arcu.
			</p>
			<span class="clear"></span>
			
			<img src="images/sample_image.jpg" class="alignleft noTopMargin with_caption" title="Lorem ipsum dolor sit amet." alt="A Sample Image">
			<h3>Image with a caption</h3>
			<p>Mauris congue adipiscing lobortis. Praesent id turpis orci, ut mattis arcu. Sed dui metus, commodo nec eleifend non, aliquam vel odio. Suspendisse a risus mi. Fusce ut neque quis sapien eleifend feugiat in sed lacus. Suspendisse bibendum, leo ultricies vestibulum tempor, erat dolor molestie orci, vitae dignissim ante justo eleifend justo. Mauris consectetur, sem eu pellentesque fringilla, nulla justo ornare.
			</p>
			<span class="clear"></span>
			
			<p>A <a href="#">link</a>, <abbr title="this really isn't a very good description">acronym</abbr>, <strong>strong text</strong> and <del>deleted text</del>.</p>
		
			<span class="br-solid"></span>
		
			<h2>Images Style<em class="heading_description">A sample off all the possible variations of images styles</em></h2>
			
			<a href="#" class="alignleft noTopMargin"><img src="images/sample_image.jpg" width="195" alt="A Sample Image"></a>
			<h3>Image with a hyperlink</h3>
			<p>
			Mauris congue adipiscing lobortis. Praesent id turpis orci, ut mattis arcu. Sed dui metus, commodo nec eleifend non, aliquam vel odio. Suspendisse a risus mi. Fusce ut neque quis sapien eleifend feugiat in sed lacus. Suspendisse bibendum, leo ultricies vestibulum tempor, erat dolor molestie orci, vitae dignissim ante justo eleifend justo.
			</p>
			<span class="clear"></span>
			
			<div class="onethird noLeftMargin">
				<h3>Image with class go</h3>
				<a href="#" class="go"><img src="images/sample_image_2.jpg" alt="A Sample Image"></a>
			</div>
			
			<div class="onethird noRightMargin">
				<h3>Image with class play</h3>
				<a href="#" class="play"><img src="images/sample_image_2.jpg" alt="A Sample Image"></a>
			</div>
			
			<div class="onethird noLeftMargin">
				<h3>Image with class zoom</h3>
				<a href="#" class="zoom"><img src="images/sample_image_2.jpg" alt="A Sample Image"></a>
			</div>
			
			<div class="onethird noRightMargin">
				<h3>Image with class zoom_rounded</h3>
				<a href="#" class="zoom_rounded"><img src="images/sample_image_2.jpg" alt="A Sample Image"></a>
			</div>
			
			<div class="onethird noLeftMargin">
				<h3>Image with class view</h3>
				<a href="#" class="view"><img src="images/sample_image_2.jpg" alt="A Sample Image"></a>
			</div>
			
			<div class="onethird noRightMargin">
				<h3>Image with class external</h3>
				<a href="#" class="external"><img src="images/sample_image_2.jpg" alt="A Sample Image"></a>
			</div>
			
			<div class="onethird noLeftMargin">
				<h3>Image with class read_more</h3>
				<a href="#" class="read_more"><img src="images/sample_image_2.jpg" alt="A Sample Image"></a>
			</div>
			
			<div class="onethird noRightMargin">
				<h3>Image with class read_article</h3>
				<a href="#" class="read_article"><img src="images/sample_image_2.jpg" alt="A Sample Image"></a>
			</div>
			
			<div class="onethird noLeftMargin">
				<h3>Image with class arrow_left</h3>
				<a href="#" class="arrow_left"><img src="images/sample_image_2.jpg" alt="A Sample Image"></a>
			</div>
			
			<div class="onethird noRightMargin">
				<h3>Image with class arrow_right</h3>
				<a href="#" class="arrow_right"><img src="images/sample_image_2.jpg" alt="A Sample Image"></a>
			</div>
			
			<span class="br-solid"></span>
		
			<h2>Ordered &amp; Unordered lists<em class="heading_description">A sample off all the possible variations list styles</em></h2>
			
			<div class="onethird noLeftMargin">
				<h4>Decimal labeled list</h4>
				<ol class="ordered-decimals">
					<li>Mauris sollicitudin tempor pulvinar.</li>
					<li>Etiam in ante sed leo tincidunt eleifend.</li>
					<li>Aenean quis elementum quam</li>
				</ol>
			</div>
			
			<div class="onethird noRightMargin">
				<h4>alphabetical labeled list</h4>
				<ol class="ordered-alphabet">
					<li>Mauris sollicitudin tempor pulvinar.</li>
					<li>Etiam in ante sed leo tincidunt eleifend.</li>
					<li>Aenean quis elementum quam</li>
				</ol>
			</div>
			
			<div class="half_onethird noLeftMargin">
				<h4>Default List</h4>
				<ul class="unordered-bullet">
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
				</ul>
			</div>
			
			<div class="half_onethird">
				<h4>Arrow List</h4>
				<ul class="unordered-arrow">
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
				</ul>
			</div>
			
			<div class="half_onethird">
				<h4>Yellow List</h4>
				<ul class="unordered-yellow">
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
				</ul>
			</div>
			
			<div class="half_onethird noRightMargin">
				<h4>info List</h4>
				<ul class="unordered-info">
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
				</ul>
			</div>
			
			<div class="half_onethird noLeftMargin">
				<h4>Cross List</h4>
				<ul class="unordered-cross">
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
				</ul>
			</div>
			
			<div class="half_onethird">
				<h4>tick List</h4>
				<ul class="unordered-tick">
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
				</ul>
			</div>
			
			<div class="half_onethird">
				<h4>exclamation List</h4>
				<ul class="unordered-exclamation">
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
				</ul>
			</div>
			
			<div class="half_onethird noRightMargin">
				<h4>globe List</h4>
				<ul class="unordered-globe">
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
					<li>Lorem ipsum dolor</li>
				</ul>
			</div>
					
			<span class="br-solid"></span>
			
			<h1>H1 Heading<em class="heading_description">H1 heading description</em></h1>
			<h2>H2 Heading<em class="heading_description">H2 heading description</em></h2>
			<h1>H1 Heading</h1>
			<h2>H2 Heading</h2>
			<h3>H3 Heading</h3>
			<h4>H4 Heading</h4>
			<h5>H5 Heading</h5>
			
			<span class="br-solid"></span>
			
			<h2>Buttons<em class="heading_description">Buttons styles and avaliabe options &amp; icons</em></h2>
			
			<div class="half_onethird noLeftMargin">
				<h4>Small button</h4>
				<a href="#" class="small_button">Button</a>
			</div>
			
			<div class="half_onethird">
				<h4>With view icon</h4>
				<a href="#" class="small_button view">Button</a>
			</div>
			
			<div class="half_onethird">
				<h4>with arrow icon</h4>
				<a href="#" class="small_button arrow">Button</a>
			</div>
			
			<div class="half_onethird noRightMargin">
				<h4>external link icon</h4>
				<a href="#" class="small_button external_link">Button</a>
			</div>
			
			<span class="clear"></span>
			
			<div class="half_onethird noLeftMargin">
				<h4>Large button</h4>
				<a href="#" class="large_button">Button</a>
			</div>
			
			<div class="half_onethird">
				<h4>With view icon</h4>
				<a href="#" class="large_button view">Button</a>
			</div>
			
			<div class="half_onethird">
				<h4>with arrow icon</h4>
				<a href="#" class="large_button arrow">Button</a>
			</div>
			
			<div class="half_onethird noRightMargin">
				<h4>external link icon</h4>
				<a href="#" class="large_button external_link">Button</a>
			</div>
			
			<span class="clear"></span>
			
			<h4>Small Buttons Array</h4>
			<ul class="button_array"> 
				<li><a href="#" class="small_button">Button</a></li> 
				<li><a href="#" class="small_button">Button</a></li> 
				<li><a href="#" class="small_button">Button</a></li> 
				<li><a href="#" class="small_button">Button</a></li> 
				<li><a href="#" class="small_button">Button</a></li> 
				<li><a href="#" class="small_button">Button</a></li> 
				<li><a href="#" class="small_button">Button</a></li> 
				<li><a href="#" class="small_button">Button</a></li> 
			</ul> 
			
			<br />
			
			<h4>Large Buttons Array</h4>
			<ul class="button_array"> 
				<li><a href="#" class="large_button">Button</a></li> 
				<li><a href="#" class="large_button">Button</a></li> 
				<li><a href="#" class="large_button">Button</a></li> 
				<li><a href="#" class="large_button">Button</a></li> 
				<li><a href="#" class="large_button">Button</a></li> 
				<li><a href="#" class="large_button">Button</a></li> 
				<li><a href="#" class="large_button">Button</a></li> 
				<li><a href="#" class="large_button">Button</a></li> 
			</ul>
			
			<span class="br-solid"></span>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue enim vitae velit congue feugiat. Proin enim quam, semper tristique sollicitudin condimentum, egestas non enim. Integer aliquet laoreet est, ut accumsan eros vestibulum sit amet. Fusce sit amet diam odio, vitae tincidunt lectus.</p>
			<blockquote>This is an example of a blockqoute with a short character lenght</blockquote>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue enim vitae velit congue feugiat. Proin enim quam, semper tristique sollicitudin condimentum, egestas non enim. Integer aliquet laoreet est, ut accumsan eros vestibulum sit amet. Fusce sit amet diam odio, vitae tincidunt lectus.</p>
			<blockquote>This is an example of a blockqoute with a long character lenght. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas facilisis nulla, sit amet tempor neque lacinia auctor. Morbi a sollicitudin metus. Aliquam erat volutpat. Pellentesque iaculis, lectus sit amet dictum rhoncus, diam turpis venenatis nunc, vel ultricies dolor dolor interdum velit.</blockquote>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue enim vitae velit congue feugiat. Proin enim quam, semper tristique sollicitudin condimentum, egestas non enim. Integer aliquet laoreet est, ut accumsan eros vestibulum sit amet. Fusce sit amet diam odio, vitae tincidunt lectus.</p>
		<h4>Pre Tag</h4>	
<pre>
.cssClass {
	display: block;
	height: 100%;
	width: 100%;
}
</pre>
			
			<span class="br-solid"></span>
			<h2>Tabular Data</h2>
			
			<table> 
				<tbody> 
					<tr> 
						<th>Post Date</th> 
						<th>Title</th> 
						<th>Description</th> 
					</tr> 
					<tr> 
						<td>08.18.2009</td> 
						<td>Lorem ipsum dolor sit amet.</td> 
						<td>Commodo <a href="#">metus</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue enim vitae velit congue feugiat.</td> 
					</tr> 
					<tr> 
						<td>08.18.2009</td> 
						<td>Fusce ut diam</td> 
						<td>Purus in eget odio in sapien</td> 
					</tr> 
					<tr> 
						<td>08.18.2009</td> 
						<td>Augue non nibh</td> 
						<td>Adipiscing blandit</td> 
					</tr> 
					<tr> 
						<td>08.18.2009</td> 
						<td>Sed vestibulum</td> 
						<td>Cras <a href="#">lobortis</a> commodo</td> 
					</tr> 
				</tbody> 
			</table> 
			
			<hr>
			
			<h2>Forms</h2>
			<form action="">
				<span class="success_notice">orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris euismod mi quis erat laoreet eget vestibulum tortor gravida</span>
				<span class="error_notice">orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris euismod mi quis erat laoreet eget vestibulum tortor gravida</span>
				<span class="warning_notice">orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris euismod mi quis erat laoreet eget vestibulum tortor gravida</span>
				<span class="info_notice">orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris euismod mi quis erat laoreet eget vestibulum tortor gravida</span>
			
				<ol>
					<li>
						<label for="hello" class="auto_clear">A auto clear label</label>
						<input type="text" name="hello" id="hello" class="text_field small">
					</li>
					<li><input type="text" class="text_field small" value="Small width text field"></li>
					<li><input type="text" class="text_field medium" value="Medium width text field"></li>
					<li><input type="text" class="text_field large" value="Large width text field"></li>
					<li><textarea cols="30" rows="5" class="small">Small width text area</textarea></li>
					<li><textarea cols="30" rows="5" class="medium">Medium width text area</textarea></li>
					<li><textarea cols="30" rows="5" class="large">Large width text area</textarea></li>
					<li>
						<input type="radio" name="sex" value="male" /> Male <br />
						<input type="radio" name="sex" value="female" /> Female
					</li>
					<li>
						<input type="checkbox" name="vehicle" value="Bike" /> I have a bike <br />
						<input type="checkbox" name="vehicle" value="Car" /> I have a car
					</li>
					<li>
						<select>
						  <option value="volvo">Volvo</option>
						  <option value="saab">Saab</option>
						  <option value="mercedes">Mercedes</option>
						  <option value="audi">Audi</option>
						</select>
					</li>
					<li><input type="submit" class="submit" value="Input submit field with class submit"></li>
					<li><button>A button field</button></li>
				</ol>
			</form>
		</div>
		<!-- end content -->
		
		<div id="sidebar" class="right">
			<form action="" id="search_widget">
				<label for="search_field" class="auto_clear">Search...</label>
				<input type="text" name="search_field" id="search_field">
				<input type="submit" name="search_submit" id="search_submit">
			</form>
			<div class="inline_content_widget">
				<h3 class="widget_title">a text Widget</h3>
				<div class="widget_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ac scelerisque nisi. Maecenas auctor tellus semper leo viverra ultricies. Vestibulum vel turpis non enim vulputate gravida at id urna. Proin eu fringilla nulla. Morbi rhoncus pellentesque elit eget dictum. Proin vestibulum iaculis pulvinar. Nam rhoncus velit quis elit sollicitudin tempus iaculis justo vestibulum. Aenean gravida mollis nisl ac posuere. Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc feugiat fringilla metus.</div>
				<!-- end widget content --> 
			</div>
			<!-- end widget -->
			
			<div class="tabbed_widget">
				<ul class="widget_tabs">
					<li><a href="#tab1"><span>Inline Content</span></a></li>
					<li><a href="#tab2"><span>Categories</span></a></li>
				</ul>
				<div class="widget_tabs_content">
					<div class="tab_content">
						<h3>Just a title</h3>
						<img src="images/content_widget.jpg" width="126" class="alignright" alt=""> Quisque sapien odio, malesuada vel hendrerit in, pellentesque vitae erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi elementum vulputate porttitor. Fusce sed metus in nisi facilisis malesuada. Curabitur volutpat hendrerit enim, eget rutrum massa semper in. Sed tristique, augue sit amet aliquam pharetra.</div>
					<div class="tab_content">
						<h3>Categories</h3>
						<ul>
							<li><a href="#">Web design</a></li>
							<li><a href="#">Branding</a></li>
							<li><a href="#">Some category</a></li>
							<li><a href="#">Another one</a></li>
							<li><a href="#">Final one</a></li>
						</ul>
					</div>
				</div>
			</div>
			<!-- end widget --> 
			
		</div>
		<!-- end sidebar -->
	</div>
	<!-- end body content -->
	
	<div id="footer_container">
		<div id="footer">
			<ul class="copyright_info reset_style">
				<li><img src="images/xero_logos/footer_logo.png" alt="" id="footer_logo" class="reset_style center"></li>
				<li>A Theme By <a href="http://wizylabs.com">Wizy Labs</a>. Copyright &copy; 2010</li>
			</ul>
			<!-- end copyright info, copyright info can be changed as desired -->
			
			<div class="footer_nav_container">
				<ul class="footer_nav reset_style">
					<li><a href="#">Home</a> /</li>
					<li><a href="#">About</a> /</li>
					<li><a href="#">Advertise</a> /</li>
					<li><a href="#">Contact</a> /</li>
					<li><a href="#">Icons by IconDock</a></li>
				</ul>
				<!-- end footer nav -->
				
				<ul class="social_profiles reset_style">
					<li><a href="#"><img title="By mail" src="images/icons/social_profiles/16/email.png"></a></li>
					<li><a href="#"><img title="My Facebook account" src="images/icons/social_profiles/16/facebook.png"></a></li>
					<li><a href="#"><img title="My Flickr account" src="images/icons/social_profiles/16/flickr.png"></a></li>
					<li><a href="#"><img title="My Twitter account" src="images/icons/social_profiles/16/twitter.png"></a></li>
					<li><a href="#"><img title="RSS feed" src="images/icons/social_profiles/16/rss.png"></a></li>
				</ul>
				<!-- end social profiles nav -->
			</div>
		</div>
		<!-- end actual footer -->
	</div>
	<!-- end footer container -->
</div>
<!-- end wrapper -->
</body>
</html>